<template>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" @close="handleClose">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" size="default">
            <el-form-item label="权限名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入权限名称" />
            </el-form-item>
            <el-form-item label="权限标识" prop="key">
                <el-input v-model="form.key" placeholder="请输入权限标识" />
            </el-form-item>
            <el-form-item label="描述" prop="desc">
                <el-input v-model="form.desc" type="textarea" placeholder="请输入权限描述" />
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { createPermission, updatePermission } from '@/api/user/permissions'

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    formData: {
        type: Object,
        default: () => ({})
    }
})

const emit = defineEmits(['update:modelValue', 'success'])

const dialogVisible = ref(false)
const formRef = ref(null)
const form = ref({
    id: '',
    name: '',
    key: '',
    desc: '',
    status: 1
})

const rules = {
    name: [
        { required: true, message: '请输入权限名称', trigger: 'blur' },
        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
    ],
    key: [
        { required: true, message: '请输入权限标识', trigger: 'blur' },
        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
    ]
}

const dialogTitle = computed(() => form.value.id ? '编辑权限' : '新增权限')

watch(() => props.modelValue, (val) => {
    dialogVisible.value = val
})

watch(() => dialogVisible.value, (val) => {
    emit('update:modelValue', val)
})

watch(() => props.formData, (val) => {
    if (val && Object.keys(val).length) {
        form.value = { ...val }
    }
}, { deep: true })

const handleClose = () => {
    formRef.value?.resetFields()
    form.value = {
        id: '',
        name: '',
        key: '',
        desc: '',
        status: 1
    }
    emit('update:modelValue', false)
}

const handleSubmit = async () => {
    if (!formRef.value) return

    try {
        await formRef.value.validate()
        const submitData = { ...form.value }

        if (form.value.id) {
            await updatePermission(form.value.id, submitData)
        } else {
            await createPermission(submitData)
        }

        ElMessage.success(form.value.id ? '编辑成功' : '新增成功')
        emit('success')
        handleClose()
    } catch (error) {
        console.error(error)
    }
}
</script>